<template>
	<div class="carinfo" >
		<div class="carinfo-box" @click="hide"></div>
		<section>
			<div class="carinfo-list">
				<div class="carinfo-item" @click="reserveFn">
					<div class="carinfo-icon">
						<i class="iconfont">&#xe608;</i>
					</div>
					<div class="carinfo-txt">车辆预定</div>
				</div>
				<div class="carinfo-item" v-if="params.carPledgeState == 300 && params.carStockState >= 20 && params.carStockState != 40">
					<router-link :to="{path:'/library',query:{params:params}}">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe60c;</i>
						</div>
						<div class="carinfo-txt">销售出库</div>
					</router-link>
				</div>
				<div class="carinfo-item" v-if="params.carStockState == 30">
					<div class="carinfo-icon">
						<i class="iconfont">&#xe60c;</i>
					</div>
					<div class="carinfo-txt">出库中</div>
				</div>
				<div class="carinfo-item">
					<router-link :to="{path:'/price',query:{params:params}}">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe60b;</i>
						</div>
						<div class="carinfo-txt">销售定价</div>
					</router-link>
				</div>
				<div class="carinfo-item" v-if="params.carStockState != 10" >
					<router-link :to="{path:'/vehicle',query:{carId:params.carId}}">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe605;</i>
						</div>
						<div class="carinfo-txt">编辑车辆</div>
					</router-link>
				</div>
				<div class="carinfo-item">
					<router-link :to="{path:'/special',query:{params:params}}">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe601;</i>
						</div>
						<div class="carinfo-txt">车辆特卖</div>
					</router-link>
				</div>
				<div class="carinfo-item" v-if="params.carDetectState==520">
					<div @click="testings()">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe603;</i>
						</div>
						<div class="carinfo-txt">申请检测</div>
					</div>
				</div>
				<div class="carinfo-item" v-if="params.carStockState <= 2">					
					<router-link :to="{path:'/shelves_step1',query:{carId:params.carId}}" >
						<div class="carinfo-icon">
							<i class="iconfont">&#xe604;</i>
						</div>
						<div class="carinfo-txt">申请入库</div>
					</router-link>
				</div>
				<div class="carinfo-item" v-if="params.carStockState == 10" @click="carStock10">					
					<div class="carinfo-icon">
						<i class="iconfont"><img src="static/images/car_Stork_2.svg" alt="" width="50" height="50"></i>
					</div>
					<div class="carinfo-txt">撤销入库</div>
				</div>
				<div class="carinfo-item" v-if="params.carSiteState==410">
					<div @click="temporary()">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe604;</i>
						</div>
						<div class="carinfo-txt">申请临时出场</div>
					</div>
				</div>
				<!-- <div class="carinfo-item" v-if="params.carStockState==20&&params.carSaleState==0"> -->
				<div class="carinfo-item" v-if="params.carStockState==20&&(params.carSaleState==0||params.carSaleState==30)">	
					<div @click="shelves()">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe609;</i>
						</div>
						<div class="carinfo-txt">车辆上架</div>
					</div>
				</div>
				<div class="carinfo-item" v-if="params.carStockState==20&&params.carSaleState==20">
					<div @click="shelf()">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe60a;</i>
						</div>
						<div class="carinfo-txt">车辆下架</div>
					</div>
				</div>
				<!--申请复检  需要时开启-->
				<!-- <div class="carinfo-item" v-if="params.carStockState==510">
					<div @click="storageTwo()">
						<div class="carinfo-icon">
							<i class="iconfont">&#xe602;</i>
						</div>
						<div class="carinfo-txt">申请复检</div>
					</div>
				</div> -->
			</div>
			<div class="carinfo-cancel" @click="hide">取消</div>
		</section>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				carId: '',
				paramsData:{}
			}
		},
		methods: {
			carStock10 () {
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否撤销入库',
					// 取消按钮文本
					cancelText: '关闭',
					// 确定按钮文本
					okText: '确认撤销'
				}).then((res) => {
					if(res){
						window.axios.get(baseUrl + '/controller/carRevocation/carRevocationStock', {
							params:{
								carId:this.params.carId,
								userId:this.userSession.userId,
							}
						}).then((res)=>{
							if(res && res.data && res.data.result){
								setTimeout(()=>{
									this.params.carStockState = 2
									$toast.show('撤销成功')
								},400)
							}else{
								setTimeout(()=>{
									$toast.show('撤销失败，车辆已审核')
								},400)
							}
						})
					}
				})
			},
			reserveFn(){
				if(this.params.carOrderState==1){
					$dialog.confirm({
						// 标题					
						title: '提示',
						content: '是否取消预订该车辆',
						// 取消按钮文本
						cancelText: '关闭',
						// 确定按钮文本
						okText: '确认取消'
					}).then((res) => {
						if(res){
							window.axios.get(baseUrl + '/controller/car/updateCarState', {
								params:{
									carId:this.params.carId,
									stateKey:'carOrderState',
									stateValue:0,
									userId:this.userSession.userId,
								}
							}).then((res)=>{
								if(res){
									setTimeout(()=>{
										this.params.carOrderState = 0
										console.log(this.params.carOrderStat)
										$toast.show('取消成功')
									},400)
								}
							})
						}
					})
				}else{
					this.$router.push({path:'/reserve',query:{params:this.params}})
				}
			},
			temporary(){
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否申请临时出场',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确认'
				}).then((res) => {
					if(res) {
						window.axios.get(baseUrl + '/controller/car/updateCarState', {
							params:{
								carId:this.params.carId,
								stateKey:'carSiteState',
								stateValue:420,
								userId:this.userSession.userId,
								marketId:this.userSession.marketId
							}
						}).then((res)=>{
							if(res){
								setTimeout(()=>{
									$toast.show('申请成功', 2000)
								},400)
							}
						})
					}
				})
			},
			hide() {
				this.$emit('cancel')
			},
			testings() {
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否申请检测',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确认'
				}).then((res) => {
					if(res) {
						window.axios.get(baseUrl + '/controller/car/updateCarState', {
							params: {
								carId: this.params.carId,
								stateKey: 'carDetectState',
								stateValue: 530,
								userId: this.userSession.userId,
								marketId: this.userSession.marketId
							}
						}).then((res) => {
							//							console.log(res)
							setTimeout(()=>{
								$toast.show('申请成功', 2000)
								this.params.carDetectState = 530
								setTimeout(()=>{
									this.hide()
								},2000)
							},400)
						})
					}
				})
			},
			testingsTwo() {
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否申请复检',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确认'
				}).then((res) => {
					if(res) {
						
					}
				})
			},
			//上架
			shelves() {
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '确认将该车辆上架',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确认'
				}).then((res) => {
					if(res) {
						window.axios.get(baseUrl + '/controller/car/updateCarState', {
							params: {
								carId: this.params.carId,
								stateKey: 'carSaleState',
								stateValue: 20,
								userId: this.userSession.userId
							}
						}).then(() => {
							setTimeout(()=>{
								$toast.show('上架成功', 2000)
								this.params.carSaleState = 20
								setTimeout(()=>{
									this.hide()
								},2000)
							},400)
							
						})
					}
				})
			},
			//下架
			shelf() {
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '确认将该车辆下架',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确认'
				}).then((res) => {
					if(res) {
						window.axios.get(baseUrl + '/controller/car/updateCarState', {
							params: {
								carId: this.params.carId,
								stateKey: 'carSaleState',
								stateValue: 30,
								userId: this.userSession.userId
							}
						}).then(() => {
							setTimeout(()=>{
								$toast.show('下架成功', 2000)
								this.params.carSaleState = 30
								setTimeout(()=>{
									this.hide()
								},2000)
							},400)
						})
					}
				})
			},
			storage() {
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否申请入库',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确认'
				}).then((res) => {
					if(res) {
						window.axios.get(baseUrl + '/controller/car/updateCarState', {
							params: {
								carId: this.params.carId,
								stateKey: 'carStockState',
								stateValue: 10,
								userId: this.userSession.userId
							}
						}).then(() => {
							setTimeout(()=>{
								$toast.show('申请成功', 2000)
								this.params.carStockState = 10
								setTimeout(()=>{
									this.hide()
								},2000)
							},400)
						})
					}
				})
			},

		},
		props: [
			'params'
		],
		computed: {
			// 获取缓存数据
			userSession() {
				return sess.get('userSession')
			},

		},
		mounted() {
//			console.log(this.params)
		}
	}
</script>

<style>
	.carinfo {
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100%;
	}
	
	.loading-container.visible.active {
		z-index: 999999999;
	}
	
	.carinfo-box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
	}
	
	.carinfo section {
		position: absolute;
		z-index: 2;
		bottom: 0;
		width: 100%;
		height: auto;
		background: #fff;
		animation: carinfo 1s ease-in-out forwards;
		-webkit-animation: carinfo 1s ease-in-out forwards;
	}
	
	@keyframes carinfo {
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	@-webkit-keyframes carinfo {
		to {
			-webkit-transform: translateY(0);
			-webkit-opacity: 1;
		}
	}
	
	.carinfo-list {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		padding: 15px 0;
	}
	
	.carinfo-list:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.carinfo-item {
		width: 33.33%;
		float: left;
		padding: 8px 0;
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
		opacity: 0;
	}
	
	.carinfo-item:nth-child(1) {
		animation: carinfo .4s ease-in-out forwards .1s;
		-webkit-animation: carinfo .4s ease-in-out forwards .1s;
	}
	
	.carinfo-item:nth-child(2) {
		animation: carinfo .4s ease-in-out forwards .15s;
		-webkit-animation: carinfo .4s ease-in-out forwards .15s;
	}
	
	.carinfo-item:nth-child(3) {
		animation: carinfo .4s ease-in-out forwards .2s;
		-webkit-animation: carinfo .4s ease-in-out forwards .2s;
	}
	
	.carinfo-item:nth-child(4) {
		animation: carinfo .4s ease-in-out forwards .25s;
		-webkit-animation: carinfo .4s ease-in-out forwards .25s;
	}
	
	.carinfo-item:nth-child(5) {
		animation: carinfo .4s ease-in-out forwards .3s;
		-webkit-animation: carinfo .4s ease-in-out forwards .3s;
	}
	
	.carinfo-item:nth-child(6) {
		animation: carinfo .4s ease-in-out forwards .35s;
		-webkit-animation: carinfo .4s ease-in-out forwards .35s;
	}
	
	.carinfo-item:nth-child(7) {
		animation: carinfo .4s ease-in-out forwards .4s;
		-webkit-animation: carinfo .4s ease-in-out forwards .4s;
	}
	
	.carinfo-item:nth-child(8) {
		animation: carinfo .4s ease-in-out forwards .45s;
		-webkit-animation: carinfo .4s ease-in-out forwards .45s;
	}
	
	.carinfo-item:nth-child(9) {
		animation: carinfo .4s ease-in-out forwards .5s;
		-webkit-animation: carinfo .4s ease-in-out forwards .5s;
	}
	
	.carinfo-item:nth-child(10) {
		animation: carinfo .4s ease-in-out forwards .55s;
		-webkit-animation: carinfo .4s ease-in-out forwards .55s;
	}
	
	.carinfo-icon {
		color: #FF6816;
	}
	
	.carinfo-icon i {
		padding: 8px 0;
		display: inline-block;
		font-size: 36px;
	}
	
	.carinfo-txt {
		font-size: 13px;
	}
	
	.carinfo-cancel {
		width: 90%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		color: #fff;
		background: #FF6816;
		border-radius: 3px;
		margin: 15px auto;
		font-size: 13px;
		transform: scale(.5);
		-webkit-transform: scale(.5);
		opacity: 0;
		animation: cancel .4s ease-in-out forwards .4s;
		-webkit-animation: cancel .4s ease-in-out forwards .4s;
	}
	
	@keyframes cancel {
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	@-webkit-keyframes cancel {
		to {
			-webkit-transform: scale(1);
			-webkit-opacity: 1;
		}
	}
	
	.popup-container.popup-showing {
		z-index: 99999999;
		background: rgba(0, 0, 0, .3);
	}
</style>